<!--
 * @Author: your name
 * @Date: 2021-10-12 10:26:19
 * @LastEditTime: 2021-10-25 18:21:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \wisdom-education-admin-front-v1.0.2-master\src\views\education\examtask.vue
-->
<template>
  <div>
    <!-- 搜索 添加 导出 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input
          placeholder="请输入任务名称"
          v-model="keyword"
          clearable
          @keyup.native="keyup()"
        >
          <el-button
            slot="append"
            @click="getExamTaskList"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-col>

      <el-col :span="2">
        <el-button type="primary" @click="addTaskVisible = true"
          >添加任务</el-button
        >
      </el-col>
      <el-col :span="4">
        <el-button type="success">导出</el-button>
      </el-col>
    </el-row>
    <br />

    <!-- 考试任务列表 -->
    <el-table
      :data="taskList"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="50">
      </el-table-column>

      <el-table-column label="任务名称" align="center" prop="name">
      </el-table-column>

      <el-table-column
        label="开始时间"
        align="center"
        prop="startTime"
        min-width="100px"
      >
      </el-table-column>

      <el-table-column
        label="结束时间"
        align="center"
        prop="endTime"
        min-width="100px"
      >
      </el-table-column>
     <el-table-column label="试卷数量" align="center">
        <template slot-scope="scope">
          {{scope.row.testPaperInfoList.length}}
        </template>
      </el-table-column>
      <el-table-column label="监考员" align="center" prop="adminName">
        
      </el-table-column>

      <el-table-column label="考场" align="center" prop="examRoomName"> </el-table-column>

      <el-table-column label="备注" align="center" prop="text">
      </el-table-column>

 

      <el-table-column label="操作" align="center" min-width="150">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon="el-icon-view"
            @click="showTestPaper(scope.row)"
            >查看试卷</el-button
          >

          <el-button
            size="small"
            type="text"
            icon="el-icon-edit"
            @click="showUpdateTaskVisible(scope.row)"
            >修改</el-button
          >

          <el-button
            size="small"
            icon="el-icon-delete"
            type="text"
            @click="deleteTask(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加考试任务对话框 -->
    <el-dialog
      title="新增考试任务"
      :visible.sync="addTaskVisible"
      :close-on-click-modal="false"
      width="800px"
      @close="addDialogClosed"
    >
      <!--添加任务表单 -->
      <el-form
        label-width="100px"
        :model="addTaskForm"
        :rules="addTaskFormRules"
        ref="addTaskFormRef"
      >
        <el-form-item label="任务名称" prop="name">
          <el-input v-model="addTaskForm.name"></el-input>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="addTaskForm.startTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="addTaskForm.endTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="监考员">
          <el-select v-model="addTaskAdminValue" placeholder="请选择考试任务">
            <el-option
              v-for="item in addTaskAdminList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="考场">
          <el-select v-model="addTaskRoomValue" placeholder="请选择考试任务">
            <el-option
              v-for="item in addTaskRoomList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="text">
          <el-input v-model="addTaskForm.text"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部 -->
      <span slot="footer">
        <el-button @click="addTaskVisible = false">取 消</el-button>
        <el-button type="primary" @click="addExamTask()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改任务对话框 -->
    <el-dialog
      title="修改考试任务"
      :visible.sync="editTaskVisible"
      :close-on-click-modal="false"
      width="800px"
    >
      <!--修改任务表单 -->
      <el-form label-width="100px" v-model="editTaskForm">
        <el-form-item label="任务名称">
          <el-input v-model="editTaskForm.name"></el-input>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-date-picker
            v-model="editTaskForm.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-date-picker
            v-model="editTaskForm.endTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="监考员">
          <el-select v-model="editTaskAdminValue" placeholder="请选择考试任务">
            <el-option
              v-for="item in editTaskAdminList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="考场">
          <el-select v-model="editTaskRoomValue" placeholder="请选择考试任务">
            <el-option
              v-for="item in editTaskRoomList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="所用试卷">
          <el-select v-model="testPaperValue" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="备注">
          <el-input v-model="editTaskForm.text"></el-input>
        </el-form-item>
      </el-form>

      <!-- 底部 -->
      <span slot="footer">
        <el-button @click="editTaskVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateExamTask()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看试卷对话框 -->
    <el-dialog
      width="800px"
      title="试卷信息"
      :visible.sync="showTextPaperVisible"
      :close-on-click-modal="false"
    >
      <!-- 考试任务--试卷列表 -->
      <el-table :data="taskTestPaperList" border stripe style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          width="50"
        ></el-table-column>

        <el-table-column
          label="试卷名称"
          align="center"
          prop="name"
        ></el-table-column>

        <el-table-column
          label="年级"
          align="center"
          prop="gradeInfoName"
        ></el-table-column>

        <el-table-column
          label="考试时间(分钟)"
          align="center"
          prop="examTime"
        ></el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteTestPaperFromTask(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部 -->
      <span slot="footer">
        <el-button type="primary" @click="showTextPaperVisible = false"
          >完 成</el-button
        >
      </span>
    </el-dialog>

    <!-- 考试任务分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[10, 10, 30, 40]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getPaperInfoList } from "@/api/testPaperInfo";
export default {
  data() {
    return {
      //考试任务列表
      taskList: [],
      pageSize: 10,
      pageNumber: 1, //当前页
      totalCount: 0, //总数
      loading: false,
      //添加任务对话框
      addTaskVisible: false,
      //修改任务对话框
      editTaskVisible: false,
      //查看试卷对话框开关
      showTextPaperVisible: false,
      status: 0,
      keyword: "",
      //新增任务表单
      addTaskForm: {
        name: "",
        startTime: null,
        endTime: null,
        text: "",
        statu: 0,
        adminId:0,
        examRoomId:0
      },
      //修改任务表单
      editTaskForm: {
        id: 0,
        name: "",
        startTime: null,
        endTime: null,
        text: "",
        adminId:0,
        examRoomId:0
      },
      options: [],
      checkedTestTaskIds: [], //考试任务id数组
      testPaperValue: null, //选择考试任务的值
      addTaskFormRules: {
        name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        text: [],
      },
      //考试任务试卷列表
      taskTestPaperList: [],
      examTaskIds: [],

      //添加任务监考员下拉框
      addTaskAdminList: [
        
      ],
      addTaskAdminValue: '',
      //添加任务考场下拉框
      addTaskRoomList: [
      
      ],
      addTaskRoomValue: '',

      //修改任务监考员下拉框
      editTaskAdminList: [
       
      ],
      editTaskAdminValue: "",
      //修改任务考场下拉框
      editTaskRoomList: [],
      editTaskRoomValue: ''
    };
  },
  created() {
    this.getExamTaskList();
    this.getTestPaperByPublishList()
    this.selectAllNoArrangeRoom()
    this.selectAllNoArrangeAdmin()
  },
  methods: {
    keyup() {
      if (this.judgeNull(this.keyword)) {
        this.getExamTaskList();
      }
    },

    //判空
    judgeNull(str) {
      if (str == "") return true;
      var regu = "^[ ]+$";
      var re = new RegExp(regu);
      return re.test(str);
    },
    deleteTestPaperFromTask(item){
        
         const that = this;
      var arr = [];
      that.axios
        .get(
          that.$http.httpUrl('/system/testPaperInfo/deleteToExamTask'),{
             params: {
              id:item.id,
              examTaskId:0}
          })
        
        .then((response) => {
          if(response.data.data==1){
            that.getTestPaperListByExamTask(item.examTaskId)
               that.$message({
                type: "success",
                message: response.data.message,
              });
          }
        
        });
    },
    getTestPaperByPublishList() {
      const that = this;
      var arr = [];
      that.axios
        .get(
          that.$http.httpUrl(`/system/testPaperInfo/getTestPaperByPublishList`)
        )
        .then((response) => {
          arr = response.data.data;
          arr.forEach((value, index) => {
            this.options.push({ value: value.id, label: value.name });
          });
        });
    },
     // 获取未安排的考场的老师
    selectAllNoArrangeAdmin() {
      const that = this;
      var arr = [];
      that.axios
        .get(
          that.$http.httpUrl(`/system/admin/selectAllNoArrangeAdmin`)
        )
        .then((response) => {
          console.log(response.data.data)
          arr = response.data.data.dataList;
          arr.forEach((value, index) => {
            this.editTaskAdminList.push({ value: value.id, label: value.name });
            this.addTaskAdminList.push({ value: value.id, label: value.name });
          });
        });
    },
    // 获取未安排的考场
    selectAllNoArrangeRoom() {
      const that = this;
      var arr = [];
      that.axios
        .get(
          that.$http.httpUrl(`/system/examRoom/selectAllNoArrangeRoom`)
        )
        .then((response) => {
          console.log(response.data.data)
          arr = response.data.data.dataList;
          arr.forEach((value, index) => {
            this.editTaskRoomList.push({ value: value.id, label: value.name });
               this.addTaskRoomList.push({ value: value.id, label: value.name });
          });
        });
    },
  
    getExamTaskList() {
      this.axios
        .get(this.$http.httpUrl(`/exam/getExamTaskList`), {
          params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            name: this.keyword,
          },
        })
        .then((response) => {
          this.taskList = response.data.data.dataList;
          this.totalCount = response.data.data.total;
          // console.log(response.data.data.dataList)
        });
    },
    // 监听 添加任务对话框的关闭事件
    addDialogClosed() {
      this.$refs.addTaskFormRef.resetFields();
    },
    addExamTask() {
      var that = this;
      this.$refs.addTaskFormRef.validate((valid) => {
        if (!valid) return;
        this.axios
          .get(this.$http.httpUrl(`/exam/addExamTask`), {
            params: {
              name: this.addTaskForm.name,
              startTime: this.addTaskForm.startTime,
              endTime: this.addTaskForm.endTime,
              text: this.addTaskForm.text,
              statu: 0,
              adminId:this.addTaskAdminValue,
              examRoomId:this.addTaskRoomValue
            },
          })
          .then((response) => {
            if (response.data.code === 1) {
              that.$message({
                type: "success",
                message: response.data.message,
              });
            }
            that.addTaskVisible = false;
          });
      });
      this.getExamTaskList();
    },
    //查看任务试卷信息
    showTestPaper(item) {
        const that = this;
      var arr = [];
      this.showTextPaperVisible = true;
      // console.log()
     this.getTestPaperListByExamTask(item.id)
    
  
      // console.log(item.testPaperInfoList);
    },
    //
    getTestPaperListByExamTask(id){
       const that = this;
        that.axios
        .get(
          that.$http.httpUrl(`/system/testPaperInfo/getTestPaperListByExamTask?examTaskId=`+id)
        )
        .then((response) => {
           console.log('response.data')
          console.log(response.data)
          // arr = response.data.data.dataList;
             this.taskTestPaperList = response.data.data;
        });
      
    },

    
    showUpdateTaskVisible(item) {
      this.editTaskVisible = true;
      this.editTaskForm.id = item.id;
      this.editTaskForm.name = item.name
      this.editTaskForm.startTime = item.startTime
      this.editTaskForm.endTime = item.endTime
      this.editTaskForm.text = item.text
 
    },
    updateExamTask() {
      var that = this;
      that.axios
        .get(that.$http.httpUrl(`/exam/updateExamTask`), {
          params: {
            id: this.editTaskForm.id,
            name: this.editTaskForm.name,
            startTime: this.editTaskForm.startTime,
            endTime: this.editTaskForm.endTime,
            text: this.editTaskForm.text,
             adminId:this.editTaskAdminValue,
              examRoomId:this.editTaskRoomValue
           
          },
        })
        .then((response) => {
          if (response.data.code === 1) {
            that.$message({
              type: "success",
              message: response.data.message,
            });
          }
          that.editTaskVisible = false;
        });
      that.getExamTaskList();
    },
    async updateExamTaskStatus(item) {
      console.log(item.testPaperInfo.publishFlag);
      var that = this;

      if (item.testPaperInfo.publishFlag == false) {
        that.axios
          .post(
            that.$http.httpUrl(
              "/system/testPaperInfo/cancelTestPaperInfo/" +
                item.testPaperInfo.id
            )
          )
          .then((response) => {
            this.$message.success(response.data.message);
            // this.loading = true
            that.getExamTaskList();
          });
      } else {
        that.axios
          .post(
            that.$http.httpUrl(
              "/system/testPaperInfo/publishTestPaperInfo/" +
                item.testPaperInfo.id
            )
          )
          .then((response) => {
            this.$message.success(response.data.message);
            // this.loading = true
            that.getExamTaskList();
          });
      }

      that.getExamTaskList();
    },
    handleSizeChange(val) {
      this.pageNumber = 1;
      this.pageSize = val;
      this.getExamTaskList();
    },
    //表头多选按钮
    handleSelectionChange(val) {
      this.checkedTestTaskIds = val;
      // console.log(val)
      this.checkedTestTaskIds.forEach((number, index) => {
        this.examTaskIds.push(number.id);
      });
      console.log(this.examTaskIds);
      this.examTaskIds = [];
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getExamTaskList();
    },
    deleteTask(item) {
      this.$confirm(
        "此操作将删除【" +
          item.name +
          "】此任务在系统中的所有数据,删除后不可恢复,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.axios
          .get(this.$http.httpUrl("exam/deleteExamTaskById?id=" + item.id))
          .then((response) => {
            if (response.data.code === 1) {
              this.$message.success("删除成功");
              this.getExamTaskList();
            }
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>